<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="stat-card">
        <template #header>
          <h4>今日标语</h4>
        </template>
        <div class="stat-value">成功源于团队合作，我们共同创造。</div>
        
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="stat-card">
        <template #header>
          <h4>功能介绍</h4>
        </template>
        <div class="stat-value">4大模块</div>
        <div class="stat-desc">请点击具体按钮查看</div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="stat-card">
        <template #header>
          <h4>联系电话</h4>
        </template>
        <div class="stat-value">有问题请拨打电话</div>
        <div class="stat-desc">13233091297</div>
      </el-card>
    </el-col>
  </el-row>
  <el-row class="mt-4">
    <el-col :span="24">
      <el-card>
        <!-- 标题居中：给header添加居中样式 -->
        <template #header>
          <div class="card-header text-center">
          
          <h4>功能入口</h4>
          </div>
        </template>
        <!-- 按钮横向等间隔排列：用flex布局 + justify-content: space-between -->
        <el-row :gutter="30" class="d-flex justify-content-between">
          <el-col :span="6">
            <el-button type="primary" @click="goTo('/Emp/leave')">
              <el-icon><Calendar /></el-icon>
              请假申请
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="success" @click="goTo('/Emp/attend')">
              <el-icon><Clock /></el-icon>
              考勤打卡
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="warning" @click="goTo('/Emp/resign')">
              <el-icon><DocumentRemove /></el-icon>
              离职申请
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="info" @click="goTo('/personal')">
              <el-icon><User /></el-icon>
              个人中心
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { useRouter } from "vue-router";
import { Calendar, Clock, DocumentRemove, User } from "@element-plus/icons-vue";

const router = useRouter();

const goTo = (path) => router.push(path);
</script>

<style scoped>
.stat-card {
  text-align: center;
  padding: 20px 0;
}
.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin: 10px 0;
}
.stat-desc {
  color: #666;
  font-size: 14px;
}

/* 标题居中样式 */
.text-center {
  text-align: center;
}
/* flex布局使按钮等间隔排列 */
.d-flex {
  display: flex;
  margin-left: 20px;
  margin-right: 20px;
}
.justify-content-between {
  justify-content: space-between;
}
</style>
